<template>
    <el-dialog v-model="isShow" :align-center="true" :close-on-click-modal="false" :destroy-on-close="true" :title="formTitle" class="dialog-box">
        <el-scrollbar class="dialog-box-scrollbar">
            <el-form :label-width="labelWidth" ref="formRef" :model="form" :rules="rules" status-icon>
                <template v-if="formItems.length !== 0">
                    <template v-for="(item, index) in formItems" :key="index">
                        <!-- 单行文本类型-->
                        <el-form-item v-if="item.type === 'text' || item.type === undefined" :label="item.label" :prop="item.name.toString()">
                            <el-input v-if="item.component === undefined" v-model="item.value" clearable :placeholder="item.placeholder"></el-input>
                            <component v-else :is="item.component"></component>
                        </el-form-item>
                        <!-- 多行文本类型 -->
                        <el-form-item v-else-if="item.type === 'textarea'" :label="item.label" :prop="item.name.toString()">
                            <el-input
                                v-if="item.component === undefined"
                                type="textarea"
                                v-model="item.value"
                                :placeholder="item.placeholder"
                            ></el-input>
                            <component v-else :is="item.component"></component>
                        </el-form-item>
                        <!-- number类型 -->
                        <el-form-item v-else-if="item.type === 'number'" :label="item.label" :prop="item.name.toString()">
                            <el-input-number
                                v-if="item.component === undefined"
                                :min="0"
                                v-model="item.value"
                                :placeholder="item.placeholder"
                            ></el-input-number>
                            <component v-else :is="item.component"></component>
                        </el-form-item>
                        <!-- select类型 -->
                        <el-form-item v-else-if="item.type === 'select'" :label="item.label" :prop="item.name.toString()">
                            <el-select
                                v-model="item.value"
                                clearable
                                :placeholder="item.placeholder"
                                @change="onSelectChange($event, item.name)"
                                v-if="item.options && item.options().length !== 0 && item.component === undefined"
                            >
                                <el-option
                                    v-for="(option, index) in item.options()"
                                    :key="index"
                                    :label="option.label"
                                    :value="option.value"
                                ></el-option>
                            </el-select>
                            <component v-else :is="item.component"></component>
                        </el-form-item>
                        <!-- treeSelect类型 -->
                        <el-form-item v-else-if="item.type === 'treeSelect'" :label="item.label" :prop="item.name.toString()">
                            <el-tree-select
                                v-if="item.options && item.options().length !== 0 && item.component === undefined"
                                v-model="item.value"
                                :placeholder="item.placeholder"
                                :data="item.options()"
                                :show-checkbox="item.default ?? false"
                                check-strictly
                                default-expand-all
                                render-after-expand
                                fit-input-width
                                clearable
                                multiple
                                filterable
                            ></el-tree-select>
                            <component v-else :is="item.component"></component>
                        </el-form-item>
                        <el-form-item v-else-if="item.type === 'icon'" :label="item.label" :prop="item.name.toString()">
                            <el-input v-if="item.component === undefined" v-model="item.value" :placeholder="item.placeholder" clearable>
                                <template #prepend>
                                    <div @click="onOpenSelectIconDialog">
                                        <el-button v-if="!item.value">选择图标</el-button>
                                        <Icon v-else :name="item.value"></Icon>
                                    </div>
                                </template>
                            </el-input>
                            <component v-else :is="item.component"></component>
                        </el-form-item>
                    </template>
                </template>
                <div class="dialog-form-item-group">
                    <template v-if="formItems.length !== 0">
                        <template v-for="(item, index) in formItems" :key="index">
                            <el-form-item v-if="item.type === 'switch'" :label="item.label" :prop="item.name.toString()">
                                <el-switch
                                    v-if="item.component === undefined"
                                    v-model="item.value"
                                    inline-prompt
                                    :active-text="item.default !== null && Array.isArray(item.default) ? item.default[0] : ''"
                                    :inactive-text="item.default !== null && Array.isArray(item.default) ? item.default[1] : ''"
                                />
                                <component v-else :is="item.component"></component>
                            </el-form-item>
                        </template>
                    </template>
                </div>
            </el-form>
        </el-scrollbar>
        <template #footer>
            <el-button @click="onCancel">取消</el-button>
            <el-button @click="onConfirm(formRef)" type="primary">确认</el-button>
        </template>
    </el-dialog>
    <IconSelect ref="iconSelectRef" @onSelectIcon="onSelectIcon"></IconSelect>
</template>

<script setup lang="tsx">
import { IconNameType } from '@/types/type'
import type { FormInstance, FormRules } from 'element-plus'

const formRef = ref<FormInstance>()
const iconSelectRef = ref()
const isShow = ref(false)
const formTitle = ref('添加')
interface Props {
    formItems: FormItem<any>[]
    labelWidth?: string
    rules?: FormRules<any>
}
const props = withDefaults(defineProps<Props>(), {
    labelWidth: '100',
})
const emit = defineEmits(['onTableAction'])

let form = reactive({})

// 打开dialog
const onOpenDialog = () => {
    isShow.value = true
}
const onSelectChange = (value: any, name: any) => {}
// 打开选择图标dialog
const onOpenSelectIconDialog = () => iconSelectRef.value.onOpenDialog()
// 选择图标回调
const onSelectIcon = (icon: IconNameType) => {}

// 关闭dialog
const onCloseDialog = () => (isShow.value = false)
// 取消
const onCancel = () => onCloseDialog()
// 完成确认
const onConfirm = (formEl: FormInstance | undefined) => {
    if (!formEl) return

    formEl.validate((valid) => {
        if (valid) {
            console.log('成功')
        } else {
            console.log('失败')
        }
    })
}

defineExpose({
    onOpenDialog,
    onCloseDialog,
})
</script>

<style lang="scss" scoped>
.table-form-dialog-menu-box {
    display: flex;
    align-items: center;

    .title {
        margin: 0 10px;
    }
}
.dialog-form-item-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
</style>
